<template>
    <div id="qrcode-container" style="text-align: center;padding-top: 50px;">
        <!--<canvas ref="qrcodeContainer" style="margin: 0 auto;"></canvas>-->

        <!-- <img :src="img" alt="" :style="{
            width: width + 'px',
            height: height + 'px',
        }"> -->
        <img :src="img" alt="" :style="{
            width: '80%',
            height: '80%',
        }">
        <br />
        <ElButton @click="saveQRCode" style="width: 50%;height:40px;margin-top: 20px;font-size: 30px;">保存图片</ElButton>
    </div>
</template>

<script setup>
import { ElButton } from 'element-plus';
import { onMounted } from 'vue';
import QRCode from 'qrcode';
import { get } from '@/utils/request';
import config from '@/config/index'


const qrcodeContainer = ref(null);
const img = ref(null)
const width = ref(800)
const height = ref(800)

// onMounted(() => {
//     QRCode.toCanvas(qrcodeContainer.value, "https://www.zzwx.cn/nested/other.html", {
//             width:width.value,
//             height:height.value,

//         }, function (error) {
//             if (error) console.error(error);
//             console.log('QR Code generated successfully!');
//         });
// });




onMounted(() => {
    get("/weixin/qrcode/getRandom").then(res => {

        img.value = config.cdn_img + res.data;
        width.value = window.innerWidth - 30
        height.value = window.innerWidth - 30
    })
});



// 保存二维码
function saveQRCode() {

    // const dataURL = qrcodeContainer.value.toDataURL('image/png');

    // downloadImage(dataURL, 'qrcode.png');
    downloadImage(img.value, 'qrcode.png');
}

// 下载图片
function downloadImage(dataURL, filename) {
    const link = document.createElement('a');
    link.href = dataURL;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
</script>
